<template>
	<view class="page content-20">
		
		<view class="item-box" v-if="showPet.avatar">
			<image  class="avatar item-img" :src="showPet.avatar | avatar" mode=""></image>
			<view class="item-info">
				<view class="title item-title">{{showPet.nickName}}({{showPet.varieties}})</view>
				<view class="item-desc">{{showPet.petColor}} | {{showPet.weight}}kg</view>
			</view>
			<view class="item-btn link">
				<picker mode="selector" :range="petList" range-key="nickName" @change="changePet">
					<text>其他爱宠</text>
					<u-icon name='arrow-down' size='20' color='#999999'></u-icon>
				</picker>
			</view>
		</view>
		
		<view class="pet-news" v-if="items.length > 0">
			<view class="pet-item" v-for="item in items" :key='item.id'>
				<view class="news-date theme">{{item.newsTime | formatTime}}</view>
				<view class="pet-desc">{{item.content}}</view>
				<view class="img-wrap" v-if="item.imgList">
					<image @click="previewImg(index, item.imgList)" v-for="(img, index) in item.imgList" class="pet-img" :src="img.imgUrl" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view v-else class="empty">
			<u-empty mode='list' text='您的爱宠还没有添加任何动态记录~'></u-empty>
		</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	import api from '../utils/api.js'
	import login from '../utils/login.js'
	export default {
		data() {
			return {
				pageIndex: 1,
				pageSize: 10,
				totalCount: 0,
				info: {}, // 宠物信息
				petList: [],
				items: [],
				common,
				param: {},
				showPet: [],
				showPetIndex: 0
			}
		},
		
		onLoad() {
			if(!this.$isLogin()) {
				login.uniLogin()
			}else{
				if(!this.isBindPhone()){
				// #ifdef MP-WEIXIN
				url = '/pages/public/getWeappPhoneNumber'
				this.$link(url)
				// #endif
			}
			
			this.pageSize = common.pageSize
			this.getPetList() 
		},
		
		onShow() {
			this.getItems()
		},
		
		methods: {
			getPetList() {
				api.getPetList({ },(res) => {
					 this.petList = res
					
				}) 
			},
			
			getItems() {
				api.getPetNewsList(this.param, res => {
					console.log(res);
					let temp =  res.petNewsList || []
					 this.showPet = res
					console.log(temp);
					this.info = res
					this.items = temp
				})
			},
			
			changePet(e) {
				let index = e.detail.value
				this.showPetIndex = index
				this.pageIndex = 1
				this.items = []
				this.showPet = this.petList[this.showPetIndex]
				console.log(this.showPet);
				this.param = { petId: this.petList[this.showPetIndex]['id'] }
				this.getItems()
			},
			
			previewImg(index, imgList) {
				let temp = []
				imgList.map(item => {
					temp.push(item.imgUrl)
				})
				uni.previewImage({
					current: index,
					urls: temp
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.item{
		border-bottom: 1px solid $border-color;
	}
	.link{
		color: #999999;
		font-size: $font-size-26;
	}
	.empty{
		margin-top: 100px;
	}
	.item-desc{
		font-size: $font-size-26;
		color: #666666;
		line-height: 26upx;
		margin-top: 10upx;
		height: 26upx;
	}
	
	.pet-news{
		background-color: #fff;
		padding: 20upx 0;
		box-sizing: border-box;
		margin-top: 40upx;
	}
	.pet-item{
		padding-left: 20upx;
		border-left: 1px solid $border-color;
		padding-bottom: 20upx;
		position: relative;
		&::before{
			content: '';
			display: inline-block;
			width: 20upx;
			height: 20upx;
			background-color: $theme-color;
			border-radius: 100%;
			position: absolute;
			left: -12upx;
			top: 8upx;
		}
		.pet-desc{
			font-size: $font-size-30;
			color: #333333;
			line-height: 42upx;
			padding: 20upx 0;
		}
	}
	.news-date{
		font-size: $font-size-28;
	}
	.img-wrap{
		@include flex-base;
		justify-content: space-between;
		flex-wrap: wrap;
		margin-bottom: 40upx;
	}
	.pet-img{
		width: 310upx;
		height: 200upx;
		border-radius: 20upx;
	}
	.item{
		padding-top: 0;
		padding-bottom: 20upx;
	}
</style>
